<template>
  <view class="gongzi">
    <van-toast id="van-toast" />

    <!--pages/my/set.wxml-->
    <van-skeleton :row="6" :loading="userinfo.length == 0">
      <view class="set-box">
        <image src="@assets/gz.png" class="gzimg" mode="widthFix"></image>

        <view v-if="bangding == 1">
          <form @submit="formSubmit" bindreset="formReset">
            <view class="set-box1">
              <text class="set-tex1">姓名</text>
              <input
                type="text"
                class="set-inp"
                placeholder="输入您的姓名"
                name="name"
                :value="userinfo.bdname"
                disabled
              />
            </view>

            <view class="set-box1">
              <text class="set-tex1">身份证号码</text>
              <input
                type="text"
                class="set-inp"
                placeholder="输入您的身份证号"
                name="idcard"
                :value="userinfo.bdsfz"
                disabled
              />
            </view>

            <view class="set-box1">
              <text class="set-tex1">工资月份</text>
              <picker
                mode="date"
                start="1900-01-01"
                end="2077-09-01"
                :value="2021 - 1"
                @change="bindDateChange"
                fields="month"
              >
                <view class="picker" v-if="birthday">{{ birthday }}</view>
                <view class="picker" v-else>请选择工资月份</view>
              </picker>
            </view>

            <button class="set-btn" formType="submit">查询工资</button>
          </form>
        </view>
      </view>

      <view v-if="gzdata.length > 0" class="gz">
        <view v-if="gzdata.length > 0" class="gztitle">-工资明细-</view>

        <view v-for="(gz, index) in gzdata" class="gzz" :key="index">
          <view v-for="(yf, index) in gz.yf" :key="index" class="gzli">
            <text class="gz1">{{ yf.head }}:</text><text class="gz2"> {{ yf.content }}</text>
          </view>

          <view class="gzli">
            <text class="gz1">应发:</text><text class="gz2"> {{ gz.salary_yingfa }}</text>
          </view>
          <view class="gzli">
            <text class="gz1">实发:</text><text class="gz2">{{ gz.salary_shifa }}</text>
          </view>

          <view class="gzli">
            <text class="gz1">税前工资:</text><text class="gz2">{{ gz.salary_shuiqian }}</text>
          </view>
          <view class="gzli">
            <text class="gz1">养老:</text><text class="gz2">{{ gz.geren_yanglao }}</text>
          </view>

          <view class="gzli">
            <text class="gz1">医疗:</text><text class="gz2">{{ gz.geren_yiliao }}</text>
          </view>
          <view class="gzli">
            <text class="gz1">失业:</text><text class="gz2">{{ gz.geren_shiye }}</text>
          </view>

          <view class="gzli">
            <text class="gz1">社保合计:</text><text class="gz2">{{ gz.geren_shebao }}</text>
          </view>
          <view class="gzli">
            <text class="gz1">公积金:</text><text class="gz2">{{ gz.geren_gongjijin }}</text>
          </view>

          <view class="gzli"
            ><text class="gz1">单位:</text><text class="gz2">{{ gz.khdw_name }}</text></view
          >
          <view class="gzli">
            <text class="gz1">工资年月:</text><text class="gz2">{{ gz.gongzi_time }}</text></view
          >
        </view>
      </view>
      <view class="adbottom">
        <ad unit-id="adunit-792c10e4172ab915" ad-type="grid" grid-opacity="0.8" grid-count="5" ad-theme="white"></ad>
      </view>
    </van-skeleton>
  </view>
</template>

<script>
import Taro from '@tarojs/taro';
// import { getCurrentInstance } from '@tarojs/taro';
import Toast from '@components/vant/toast/toast';
import { sentsms, binding, gongzi } from '@api/gongzi';
import { Current } from '@tarojs/taro';
export default {
  data() {
    let date = new Date();
    const birthday = ` ${date.getFullYear()}-${date.getMonth() == 0 ? 12 : date.getMonth()}`;
    return {
      userinfo: [],
      region: [],
      index: 0,
      idcard: '',
      tel: '',
      birthday,
      // array: [{1:'本科'}, {2:'硕士'}],
      gsid: 0,
      gzdata: [],
      yfdetail: [],
      title: '发送验证码', // 按钮中显示的字符
      titleConst: '发送验证码', // 重置后的按钮中显示的字符
      count: 60, // 倒计时的秒数
      countConst: 60, // 重置后的倒计时的秒数
      isDisabled: false, // 按钮是否禁用
    };
  },
  methods: {
    formSubmit(e) {
      var that = this;
      var formdata = e.detail.value;
      formdata.month = this.birthday;
      formdata.gsid = Taro.getStorageSync('gsid');
      console.log(formdata);
      Taro.showLoading({
        title: '加载中',
        mask: true,
      });
      gongzi({ formdata: formdata }).then((data) => {
        console.log(data, '查询成功.....................');
        if (data.code == 1) {
          this.gzdata = '';
        } else {
          Toast.success('查询成功');
          this.gzdata = data.data;
          this.yfdetail = data.data.yf;
        }
      });
    },
    bdSubmit(e) {
      Taro.showLoading({
        title: '加载中',
      });
      var that = this;
      var formdata = e.detail.value;
      formdata.month = this.birthday;
      formdata.gsid = Taro.getStorageSync('gsid');
      binding({ formdata: formdata }).then((data) => {
        Taro.hideLoading();
        if (data.code == 0) {
          Toast(data.msg);
          this.$reguser('', function () {
            //app.loadding();
            that.$getuserbd(function (data) {
              //that.setData({ userinfo: data.data })
              that.userinfo = data.data;
              that.region = [data.data.province, data.data.city, data.data.area];
              that.regionh = [data.data.hkprovince, data.data.hkcity, data.data.hkarea];
              // that.// birthday: data.data.birthday,
              that.index = data.data.xueli;
              that.tel = data.data.telphone; //手机号
              that.idcard = data.data.idcard; //身份证
              that.bd = data.data.bd; //是否绑定
            });
          });
        }
      });
    },
    countdown(e) {
      let count = this.count;
      var that = this;
      var formdata = e.detail.value;
      console.log(formdata);
      let tel = this.tel;
      sentsms({ tel: tel }).then((res) => {
        if (!res.code == 1) {
          // Toast.fail(res.msg);
          // console.log(data.data);
          Toast.success('发送成功');
        }
      });

      var countdown = setInterval(() => {
        if (count == 0) {
          this.title = this.titleConst;
          this.count = this.countConst;
          this.isDisabled = false;

          // 取消定时器
          clearInterval(countdown);
        } else {
          this.title = count-- + 's后重试';
          this.isDisabled = true;
        }
      }, 1000);
    },
    bindinput(e) {
      this.tel = e.detail.value;
    },
    bindPickerChange: function (e) {
      console.log('picker发送选择改变，携带值为', e.detail.value);

      this.index = e.detail.value;
    },

    bindRegionChange: function (e) {
      this.region = e.detail.value;
    },

    bindRegionChangejg: function (e) {
      this.regionjg = e.detail.value;
    },

    bindRegionChangehk: function (e) {
      this.regionhk = e.detail.value;
    },
    bindDateChange: function (e) {
      console.log(e.detail.value);
      this.birthday = e.detail.value;
    },
  },
  computed: {
    bangding() {
      return this.$store.state.binding.bd;
    },
  },
  onShow() {
    let bd =Taro.getStorageSync('bd')
    this.$store.commit('binding/isbd')
     if (bd) {
       return
     }
    
    this.$store.dispatch('binding/binding').then(() => {
      if (this.bangding == 0) {
        Taro.showModal({
          title: '未绑定',
          content: '该功能需要绑定手机才能使用',
          confirmText: '马上绑定',
          cancelText: '返回首页',
          success: function (res) {
            if (res.confirm) {
              Taro.navigateTo({
                url: '/pages/binding/index',
              });
            } else if (res.cancel) {
              // Taro.navigateBack({
              //   delta: 2,
              // });
             Taro.reLaunch({
                url: '/pages/index/index'
             });
            }
          },
        });
      }
    });
  },

  created() {
    var that = this;

    //获取本地sessinid
    var session_id = Taro.getStorageSync('session_id');

    //获取扫码进入id
    var gsid = Taro.getStorageSync('gsid');

    this.gsid = Taro.getStorageSync('gsid');

    if (session_id.length < 1) {
      Taro.showModal({
        title: '提示',
        content: '本操作需要登录，请登录',
        success(res) {
          if (res.confirm) {
            Taro.navigateTo({
              url: '/pages/login/index',
            });
          } else if (res.cancel) {
            Taro.reLaunch({
                url: '/pages/index/index'
             });
            //   Taro.navigateBack({
            //    delta: 2
            // });
          }
        },
      });
    }

    this.$reguser('', function () {
      //app.loadding();
      that.$getuserbd(function (data) {
        console.log(data, '信息');
        //that.setData({ userinfo: data.data })
        that.userinfo = data.data;
        that.region = [data.data.province, data.data.city, data.data.area];
        that.regionh = [data.data.hkprovince, data.data.hkcity, data.data.hkarea];
        // that.// birthday: data.data.birthday,
        that.index = data.data.xueli;
        that.tel = data.data.telphone; //手机号
        that.idcard = data.data.idcard; //身份证
        that.bd = data.data.bd; //是否绑定
      });
    });
  },
  onShareAppMessage(res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target);
    }
    return {
      title: '薪薪员工（工资查询）',
      path: '/pages/gongzi/index?isZF=1',
      success: function (res) {
        // 转发成功
      },
      fail: function (res) {
        // 转发失败
      },
    };
  },
  onShareTimeline() {},
};
</script>

<style>
/* pages/my/set.wxss */
page {
  background: #fff;
  font-family: Microsoft Yahei;
  font-size: 30px;
  height: 100%;
}
.gongzi {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 0 -41px;
  height: auto !important;
  padding-bottom: 200px;
  position: relative;
}
.adbottom {
  width: 90%;
  /* height: 300px; */
  position: absolute;
  bottom: 20px;
  left: 50%;
  margin-left: -45%;
  /* padding-bottom:20px */
}

/*暂无*/
.zan-box {
  width: 100%;
  text-align: center;
  margin-top: 40%;
  float: left;
}
.zan-img {
  width: 50px;
  height: 50px;
  display: inline-block;
}
.zan-text {
  display: block;
  text-align: center;
  color: #b8b8b8;
  font-size: 14px;
  width: 100%;
  margin-top: 10px;
}
.set-box {
  width: 100%;
  float: left;
  background: #fff;
  padding: 0 20px;
  box-sizing: border-box;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
}
.set-box1 {
  width: 100%;
  float: left;
  border-bottom: 1px #ededed solid;
  padding: 5px 0px;
}
.picker {
  height: 70px;
  line-height: 70px;
  margin-left: 50px;
}
.set-tex1 {
  display: block;
  height: 80px;
  line-height: 80px;
  color: #333;
  float: left;
  margin-right: 15rpx;
  width: 200px;
  text-align: left;
}
.set-inp {
  height: 80px;
  line-height: 80px;
  overflow: hidden;
  margin-left: 0px;
  float: left;
  color: #000;
  width: 360rpx;
}

.set-inpyz {
  height: 80px;
  line-height: 80px;
  overflow: hidden;
  margin-left: 0px;
  float: left;
  color: #000;
  width: 240rpx;
}

.set-add {
  width: 40px;
  height: 40px;
  margin-left: 10px;
  display: block;
  float: left;
}
.set-textarea {
  border: 1px #ededed solid;
  border-radius: 5px;
  float: left;
  width: 100%;
  box-sizing: border-box;
  height: 80px;
  padding: 5px;
  margin: 8px 0;
  color: #666;
}
.set-btn {
  width: 90%;
  margin: 0 5%;
  height: 70px;
  line-height: 70px;
  background: #056ba7;
  color: #fff;
  font-size: 30px;
  margin-top: 20px;
  float: left;
  margin-bottom: 30rpx;
}

.set-bdbtn {
  width: 90%;
  margin: 0 5%;
  height: 70px;
  line-height: 70px;
  background: #c55f30;
  color: #fff;
  font-size: 30px;
  margin-top: 40px;
  float: left;
  margin-bottom: 30rpx;
}

.set-radio {
  height: 30px;
  line-height: 30px;
  color: #666;
}
.set-radio radio {
  transform: scale(0.8);
}
.gz {
  width: 100%;
  height: auto;
  clear: both;
  margin-top: 640rpx;
}
.gztitle {
  text-align: center;
  width: 100%;
  font-size: 35rpx;
  color: rgb(160, 156, 156);
  font-weight: bold;
  line-height: 50rpx;
}

.gzimg {
  width: 100%;
  height: auto;
  clear: both;
}
.gzz {
  margin-bottom: 30rpx;
  /* border-bottom: 1rpx solid #d1e7f7; */
  display: block;
  width: 100vw;
  padding-bottom: 30rpx;
  /* display:flex */
}
.gzli {
  width: 90%;
  margin: 0 auto;
  border-bottom: 1rpx dotted #dbd8d8;
  height: 80rpx;
  line-height: 80rpx;
  display: block;
  display: flex;
}
.gz1 {
  color: rgb(177, 174, 174);

  height: 80rpx;
  line-height: 80rpx;
  margin-right: 20rpx;
}
.gz2 {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  flex: 1;
  /* width: 50%; */
  /* float: left; */
  height: 80rpx;
  line-height: 80rpx;
}
.gz3 {
  width: 50%;
  /* float: left; */
  height: 80rpx;
  line-height: 80rpx;
}

.yzm {
  width: 200rpx;
  float: left;
  background-color: rgb(34, 185, 42);
  font-size: 26rpx;
  line-height: 80px;
  height: 80px;
  color: rgb(252, 246, 246);
}
</style>